<template>
  <Layout @onScroll="scrollHandle">
    <template v-slot:middle>
        <Comment title="留言" @pushComment='submit' :tempCommentlist ="commentListTemp"
        :commentList="commentList" :count="count" >

        </Comment>
    </template>
  </Layout>
</template>

<script>
import Layout from '../../components/Layout/layout.vue'
import Comment from '../../components/Comment/comment.vue'
import{count,commentList,commentListTemp,loading,
        get_Comment,post_Comment,setScrollBox} from '../../compostion/useRef';
import {getMessage,postMessage}from '../../api/comment';
import {onBeforeMount} from 'vue'
export default {
   components:{
     Layout,
     Comment
   },

   setup(p,cxt){

     const scrollHandle = (fn)=>{
        fn( async()=>{

           await loading(getMessage)
        })
      
     }
     const submit = async (e)=>{ //提交评论
           const {name,content,id,text} = e;
        
            post_Comment(postMessage,name,content,id,text)

        }
   

     onBeforeMount( async ()=>{
       console.log("asdasdasdasdasd");
        await get_Comment(getMessage);
      
       setTimeout(() => {
        setScrollBox('.container-middle .container-middle');
       }, 100);
     })
     return{
       commentListTemp,
       commentList,
       count,
       scrollHandle,
       submit


     }
   }
}
</script>

<style>

</style>